import React, { Component } from "react";
import PropTypes from "prop-types";

class LifeCyclePage extends Component {
  static defaultProps = {
    // msg: "omg",
  };
  static propTypes = {
    // msg: PropTypes.string.isRequired,
  };
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log("constructor");
  }
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
  }
  componentDidMount() {
    console.log("componentDidMount");
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log(
      "nextProps",
      nextProps,
      "shouldComponentUpdate",
      "nextState",
      nextState
    );
    return true;
  }
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }
  componentDidUpdate() {
    console.log("componentDidUpdate");
  }
  setCount = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    console.log("render", this.props);
    const { count } = this.state;
    return (
      <div>
        <h3>LifeCyclePage</h3>
        <p>{count}</p>
        <button onClick={this.setCount}>改变count</button>
        {/* 传参 */}
        {/* {count % 2 && <Child count={count} />} */}
        <Child count={count} />
      </div>
    );
  }
}

// LifeCyclePage.propTypes = {
//   msg: this.prototype.string,
// };
// import React, { Component } from "react";

class Child extends Component {
  UNSAFE_componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps", nextProps);
  }
  // componentWillUnmount() {
  //   console.log("componentWillUnmount");
  // }
  render() {
    console.log("Child render");
    const { count } = this.props;
    return (
      <div>
        <h3>Child</h3>
        <p>{count}</p>
      </div>
    );
  }
}

export default LifeCyclePage;
